import React, { useEffect, useState } from "react";

import Event from "@/event/src";

function Page(): JSX.Element {
  const [pos, setPos] = useState("");
  useEffect(() => {
    let event: Event | null = null;
    const eventEl = document.querySelector(".event");
    if (eventEl != null) {
      event = new Event(eventEl as HTMLElement, {
        onSwipeVertical: ({ type, distance, origin }) => {
          setPos(`Vertical: ${type} ${distance}`);
        },
        onSwipeHorizontal: ({ type, distance, origin }) => {
          setPos(`Horizontal: ${type} ${distance}`);
        },
      });
    }
    return () => {
      event?.destroy();
    };
  }, []);

  const [pos2, setPos2] = useState("");
  useEffect(() => {
    let event: Event | null = null;
    const eventEl = document.querySelector(".event2");
    if (eventEl != null) {
      event = new Event(eventEl as HTMLElement, {
        onLongPress: () => {
          setPos2("LongPress");
        },
        onLongPressUp: () => {
          setPos2("LongPressUp");
        },
      });
    }
    return () => {
      event?.destroy();
    };
  }, []);

  const [pos3, setPos3] = useState("");
  useEffect(() => {
    let event: Event | null = null;
    const eventEl = document.querySelector(".event3");
    if (eventEl != null) {
      event = new Event(eventEl as HTMLElement, {
        onSwipeLeft: (distance) => {
          setPos3(`SwipeLeft: ${distance}`);
        },
        onSwipeRight: (distance) => {
          setPos3(`SwipeRight: ${distance}`);
        },
        onSwipeUp: (distance) => {
          setPos3(`SwipeUp: ${distance}`);
        },
        onSwipeDown: (distance) => {
          setPos3(`SwipeDown: ${distance}`);
        },
      });
    }
    return () => {
      event?.destroy();
    };
  }, []);

  const [pos4, setPos4] = useState("");
  useEffect(() => {
    let event: Event | null = null;
    const eventEl = document.querySelector(".event4");
    if (eventEl != null) {
      event = new Event(eventEl as HTMLElement, {
        onSwipeRound: ({ type, current, origin }) => {
          setPos4(`Horizontal: ${type} ${JSON.stringify(current)}`);
        },
      });
    }
    return () => {
      event?.destroy();
    };
  }, []);

  const [scale, setScale] = useState(0);
  useEffect(() => {
    let event: Event | null = null;
    const eventEl = document.querySelector(".zoom");
    if (eventEl != null) {
      event = new Event(eventEl as HTMLElement, {
        onScale(scale) {
          setScale(scale);
        },
      });
    }
    return () => {
      event?.destroy();
    };
  }, []);

  return (
    <div>
      <div className="event" style={{ height: 100, backgroundColor: "#ccc" }}>
        <div>onSwipeVertical</div>
        <div>onSwipeHorizontal</div>
      </div>
      <div>{pos}</div>

      <div className="event2" style={{ marginTop: 20, height: 100, backgroundColor: "#ccc" }}>
        <div>onLongPressUp</div>
        <div>onLongPress</div>
      </div>
      <div>{pos2}</div>

      <div className="event3" style={{ marginTop: 20, height: 100, backgroundColor: "#ccc" }}>
        <div>onSwipeLeft</div>
        <div>onSwipeRight</div>
        <div>onSwipeUp</div>
        <div>onSwipeDown</div>
      </div>
      <div>{pos3}</div>

      <div className="event4" style={{ marginTop: 20, height: 100, backgroundColor: "#ccc" }}>
        <div>onSwipeRound</div>
      </div>
      <div>{pos4}</div>

      <div
        className="zoom"
        style={{
          position: "fixed",
          top: "85%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          width: `calc(100px + ${scale}px)`,
          height: `calc(100px + ${scale}px)`,
          border: "1px solid",
        }}
      ></div>
      <div style={{ marginTop: 20 }}>scale: {scale}</div>
    </div>
  );
}

export default Page;
